<!DOCTYPE html>
<html>
<head>
	<title>TodoList by vue</title>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
	<style type="text/css">
		body{
			background-color: #f1fafa;
			font-family: "微软雅黑";
			font-size: 20px;
		}
		.input{
			display: block;
			width: 63%;
			height: 35px;
			line-height: 35px;
			margin: 30px auto;
			padding-left: 4px;
			box-sizing: border-box;
			border-radius: 5px;
			border:1px soild #ccc;
			outline: 0;
			box-shadow: 0 0 5px #ccc;
		}
		.list{
			margin: 0 auto;
			width:63%;
		}
		.unit{
			position: relative;
			padding: 10px 0;
			border-top: 1px solid #FFAEB9;
		}
		.unit:last-child{
			border-bottom: 0;
		}
		.finish{
			text-decoration: line-through;
			color: #CDC5BF;
		}
		.deleted{
			background: #FF3030;
			text-decoration: none;
			position: absolute;
			right: 0;
			font-size: 15px;
			color: #fff;
			border-radius: 5px;
			padding: 2px 5px;
		}
		.empty{
			font-size: 20px;
			color: #ccc;
			text-align: center;
			padding: 10px 0;
		}
	</style>
</head>
<body>
	<div id="app" class="app">
		<input @keydown.enter="addTask" type="text" class="input" name="任务" v-model="task.content" placeholder="添加任务">
		<div class="list">
			<div class="unit" v-for="(item,index) of list">
				<input @click="changeState(index)" :checked="item.finished" type="checkbox" name="选择">
				<span :class="{'finish':item.finished}">{{item.content}}</span>
				<button @click="removeTask(index)" class="deleted">删除</button>
			</div>
			<div v-if="list.length === 0" class="empty">暂无任务</div>
		</div>
	</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
	var log = console.log.bind(console)
	const app = new Vue({
		el:"#app",
		data: {
		    task:{
				content: '',
				finished: false,
				deleted: false,
				},
			list:[],
		},
		methods:{
			addTask:function() {
				this.list.push(this.task)
				log(this.list.length)
				//重新储存数据
				this.task = {
				content: '',
				finished:false,
				deleted:false,
				}
			},
			changeState:function(index) {
				let curState = this.list[index].finished
				this.list[index].finished = !curState
			},
			removeTask:function(index) {
				this.list.splice(index, 1)
			}
		},
	})
</script>
</html>